<template>
  <div class="main_body1">
    <div>
      <form action="">
        <div style="color:red;">
          <p>为了您的资金安全，大额提现会通过第三方进行支付代发。请填写实名信息和银行卡信息进行验证。</p>
        </div>
        <!-- 姓名 -->
        <div class="font">
          <label style="margin-left: 5px;color:red;">*</label><label class="inline-block">真实姓名</label><br>
          <input type="text" class="input_input" placeholder="请输入你的姓名" v-model="name" @blur="nameblur()" />
        </div>
        <!-- 身份证号码 -->
        <div class="font">
          <label style="margin-left: 5px;color:red;">*</label><label class="inline-block">身份证号码</label><br>
          <input type="idcard" class="input_input" placeholder="请输入你的身份证号码" v-model="idCard" @blur="idCardblur()" />
        </div>

        <van-tabs style="margin-top: 10px;" v-model="active" type="card" color="#49CCC3">
          <van-tab title="银行卡">
            <div class="yhk">
              <div>
                <div class="font">
                  <label style="margin-left: 5px;color:red;">*</label><label class="inline-block">请选择办卡银行</label>
                </div>
                <van-field
                  readonly
                  clickable
                  name="picker"
                  :value="bank"
                  label="办卡银行"
                  placeholder="点击选择办卡银行"
                  @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                  <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                  />
                </van-popup>
              </div>
              <div class="font">
                <label style="margin-left: 5px;color:red;">*</label><label class="inline-block">银行卡账号</label><br>
                <input class="input_input" type="number" placeholder="请输入您的银行卡账号" v-model="number" @blur="numberblur()" />
              </div>
              <div class="font">
                <label style="margin-left: 5px;color:red;">*</label><label class="inline-block">银行卡预留手机号</label><br>
                <input class="input_input" type="number" placeholder="请输入您的银行卡预留手机号" v-model="phone" @blur="phoneblur()" />
              </div>
            </div>
            
            <div class="button_yhk container">
              <span class="button" @click="modalinput()">提交</span>
              <van-dialog v-model="show" title="" show-cancel-button @confirm="confirm()">
                <div style="margin: 10px auto;color: red;font-weight: bolder;">
                  <span>信息提交之后不可更改</span><br>
                  <span>请再次确认无误后提交</span>
                </div>
                <div>
                  <div class="label_input">
                    <label>您的姓名：</label>
                    <input type='text' disabled="true" v-model="name" auto-focus />
                  </div>
                  <div class="label_input">
                    <label>身 份 证 ： </label>
                    <input type='number' disabled="true" v-model="idCard" auto-focus />
                  </div>
                  <div class="label_input">
                    <label>银行名称：</label>
                    <input type='text' disabled="true" v-model="bank" auto-focus />
                  </div>
                  <div class="label_input">
                    <label>银行卡号：</label>
                    <input type='number' disabled="true" v-model="number" auto-focus />
                  </div>
                  <div class="label_input"  style="margin-bottom: 10px;">
                    <label>手机号码：</label>
                    <input type='number' disabled="true" v-model="phone" auto-focus />
                  </div>
                  <div style="margin: 10px auto;color: red;font-size:12px;line-height:14px;">
                    <span>点击确认即为提交成功，<br >请耐心等待人工审核，我们会尽快确认</span>
                  </div>
                </div>
              </van-dialog>
            </div>
          </van-tab>

          <van-tab title="支付宝">
            <div class="zfb">
              <div class="font">
                <label style="margin-left: 5px;color:red;">*</label><label class="inline-block">支付宝账号</label><br>
                <input class="input_input" type="number" placeholder="请输入您的支付宝账号" v-model="zfb" @blur="zfbblur()" />
              </div>
              <div class="font">
                <label style="margin-left: 5px;color:red;">*</label><label class="inline-block">预留手机号</label><br>
                <input class="input_input" type="number" placeholder="请输入您的预留手机号" v-model="phone" @blur="phoneblur()" />
              </div>
            </div>
            
            <div class="button_zfb container1">
              <span class="button" @click="modalinput1()">提交</span>
              <van-dialog v-model="show" title="" show-cancel-button @confirm="confirm1()">
                <div style="margin: 10px auto;color: red;font-weight: bolder;">
                  <span>信息提交之后不可更改</span><br>
                  <span>请再次确认无误后提交</span>
                </div>
                <div>
                  <div class="label_input">
                    <label>您的姓名：</label>
                    <input type='text' disabled="true" v-model="name" auto-focus />
                  </div>
                  <div class="label_input">
                    <label>身 份 证 ： </label>
                    <input type='number' disabled="true" v-model="idCard" auto-focus />
                  </div>
                  <div class="label_input">
                    <label>支 付 宝： </label>
                    <input type='number' disabled="true" v-model="zfb" auto-focus />
                  </div>
                  <div class="label_input" style="margin-bottom: 10px;">
                    <label>手机号码：</label>
                    <input type='number' disabled="true" v-model="phone" auto-focus />
                  </div>
                  <div style="margin: 10px auto;color: red;font-size:12px;line-height:14px;">
                    <span>点击确认即为提交成功，<br >请耐心等待人工审核，我们会尽快确认</span>
                  </div>
                  <!-- <span class="button" @click="confirmed()">确认</span> -->
                </div>
              </van-dialog>
            </div>
          </van-tab>
        </van-tabs>
      </form>
    </div>
  </div>
</template>

<script>
var baseConfig = require("../utils/baseConfig");

import Vue from 'vue';
import { Tab, Tabs, Field, Picker, Popup, Dialog, Notify } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Field);
Vue.use(Picker);
Vue.use(Popup);
Vue.use(Dialog);
Vue.use(Notify);

export default {
  name: 'ksaddPay',
  data() {
    return {
      name: '',
      idCard: '',
      bank: '',
      zfb: '',
      number: '',
      phone: '',
      active: 0,
      accountType: '',
      // value: '',
      columns: ['招商银行', '中国建设银行', '中国工商银行', '中国农业银行', '中国光大银行', '兴业银行', '中国民生银行', '中国交通银行', '中国邮政储蓄银行', '中信银行', '广发银行', '平安银行', '中国银行', '华夏银行'],
      showPicker: false,
      show: false,
    };
  },
  methods:{
    confirm() { // 提交银行卡
      
      this.getyhkData()
      this.$router.push('/ksmyPayCard');
    },
    confirm1() { // 提交支付宝
      this.getzfbData()
      this.$router.push('/ksmyPayCard');
    },
    getyhkData() {
      // let uid = 135;
      let uid = JSON.parse(localStorage.getItem('userInfo')).id;
      console.log(this.accountType);
      this.$http.post(`${baseConfig.url}tuiwaApp/save_bank_alipay?uid=` + uid
        + '&trueName=' + this.name
        + '&IDCardNumber=' + this.idCard
        + '&bankName=' + this.bank
        + '&bankCardNum=' + this.number
        + '&aliPayAccount=' + ''
        + '&phone=' + this.phone
        + '&accountType=' + this.accountType
      )
        .then(
          res => {
            console.log(res.data);
          }
        )
    },
    getzfbData() {
      // let uid = 135;
      let uid = JSON.parse(localStorage.getItem('userInfo')).id;
      console.log(this.accountType);
      this.$http.post(`${baseConfig.url}tuiwaApp/save_bank_alipay?uid=` + uid
        + '&trueName=' + this.name
        + '&IDCardNumber=' + this.idCard
        + '&bankName=' + ''
        + '&bankCardNum=' + ''
        + '&aliPayAccount=' + this.zfb
        + '&phone=' + this.phone
        + '&accountType=' + this.accountType
      )
        .then(
          res => {
            console.log(res.data);
          }
        )
    },
    nameblur() {
      console.log(this.name, 'name');
    },
    idCardblur(){
      console.log(this.idCard, 'idCard');
    },
    numberblur(){
      console.log(this.number, 'number');
    },
    zfbblur() {
      console.log(this.zfb, 'zfb');
    },
    phoneblur(){
      console.log(this.phone, 'phone');
    },
    modalinput(){
      console.log('点击提交按钮(银行卡)');
      let nameReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/; // 姓名正则
      let phoneReg = /^1[3456789]\d{9}$/; // 手机号正则
      let idReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; // 身份证正则
      let yhkReg = /^([1-9]{1})(\d{14}|\d{18})$/; // 银行卡正则
      if (this.name == '') {
        Notify({ type: 'danger', message: '请输入姓名' });
        return false
      } else if (!(nameReg.test(this.name))) {
        Notify({ type: 'danger', message: '请按格式填写姓名' });
        return false
      } else if (this.idCard == '') {
        Notify({ type: 'danger', message: '请输入身份证号码' });
        return false
      } else if (!(idReg.test(this.idCard))) {
        Notify({ type: 'danger', message: '身份证号码有误' });
        return false;
      } else if (this.bank == '') {
        Notify({ type: 'danger', message: '请选择办卡银行' });
        return false
      } else if (this.number == '') {
        Notify({ type: 'danger', message: '请输入银行卡号' });
        return false
      } else if (!(yhkReg.test(this.number))) {
        Notify({ type: 'danger', message: '银行卡账号有误' });
        return false;
      } else if (this.phone == '') {
        Notify({ type: 'danger', message: '请输入手机号' });
        return false
      } else if (!(phoneReg.test(this.phone))) {
        Notify({ type: 'danger', message: '手机号格式错误' });
        return false;
      }
      this.accountType = 1
      this.show = true
    },
    modalinput1() {
      console.log('点击提交按钮(支付宝)');
      let idReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; // 身份证正则
      let nameReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/; // 姓名正则
      let phoneReg = /^1[3456789]\d{9}$/; // 手机号正则
      let zfbReg = /^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/; // 同时支持手机号和邮箱
      if (this.name == '') {
        Notify({ type: 'danger', message: '请输入姓名' });
        return false
      } else if (!(nameReg.test(this.name))) {
        Notify({ type: 'danger', message: '请按格式填写姓名' });
        return false
      } else if (this.idCard == '') {
        Notify({ type: 'danger', message: '请输入身份证号码' });
        return false
      } else if (!(idReg.test(this.idCard))) {
        Notify({ type: 'danger', message: '身份证号码有误' });
        return false;
      } else if (this.zfb == '') {
        Notify({ type: 'danger', message: '请输入支付宝账号' });
        return false
      } else if (!(zfbReg.test(this.zfb))) {
        Notify({ type: 'danger', message: '支付宝账号有误' });
        return false;
      } else if (this.phone == '') {
        Notify({ type: 'danger', message: '请输入手机号' });
        return false
      } else if (!(phoneReg.test(this.phone))) {
        Notify({ type: 'danger', message: '手机号格式错误' });
        return false;
      }
      this.accountType = 1
      this.show = true
    },
    onConfirm(value) {
      this.bank = value;
      console.log(this.bank, 'bank');
      this.showPicker = false;
    },
  }
}
</script>

<style lang="css" scoped>
.yhk,.zfb {
  height: 250px;
}
.main_body1 {
  height: 100%;
}
.font {
  margin-top:10px;
  text-align: left;
}
.inline-block {
  /* display:inline-block; */
  /* width:100px; */
  text-align: center;
  color:#2c3e50;
  margin-left: 5px;
}
/* 弹出框样式 */
.container {
  width: 90%;
  margin: 0 5%;
  height: 35px;
  line-height: 35px;
  border-radius: 27px;
  top: 0;
  left: 0;
  background-color: #49CCC3;
}

.container1 {
  width: 90%;
  margin: 0 5%;
  height: 35px;
  line-height: 35px;
  border-radius: 27px;
  top: 0;
  left: 0;
  background-color: #49CCC3;
}

.content_container {
  width: 80%;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.content_container1 {
  width: 80%;
  height: 290px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.close {
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 17%;
  left: 50%;
  transform: translateX(-50%);
}

.close label {
  width: 25px;
  height: 25px;
  line-height: 25px;
  display: block;
  border-radius: 50%;
  font-size: 28px;
  color: #fff;
  background-color: #15182B;
}

.nav {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
}

.tab .input {
  height: 40px;
  margin-top: 10px;
  background: #fff;
  color: #000;
}

.tab .button {
  height: 40px;
  width: 95%;
  position: absolute;
  bottom: 10px;
  background: #49ccc6;
  color: #fff;
  margin: 0 2.5%;
}

.content_wrapper {
  margin: 0 15px;
}

.content_wrapper .top_text {
  display: flex;
  flex-direction: column;
  margin: 15px 0;
  text-align: center;
  font-weight: bolder;
}

.label_input {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 15px;
}

.input_input {
  width: 88%;
  height: 30px;
  background: #fff;
  margin: 10px 4.5% 0;
}

.content_wrapper .bottom_button .button {
  position: fixed;
  bottom: 10px;
  text-align: center
}

.default {
  height: 30px;
  line-height: 30px;
  text-align: center;
  flex: 1;
  border: 1px solid #2FA1CE;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  background: skyblue;
}

.skyblue {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background: #49ccc6;
  flex: 1;
  border: 1px solid #2FA1CE;
  border-radius: 5px;
  font-size: 16px;
}

.show {
  display: block;
  height: 40px;
  color: #fff;
}

.hidden {
  display: none;
  height: 40px;
}

input {
  /* width: 96%; */
  padding-left: 5px;
}

.confirm {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: red;
  font-size: 16px;
  color: #fff;
  border-radius: 5px;
  margin-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.picker {
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  padding-left: 5px;
}
</style>